<template>
  <div class="f_luckTwo">
    <!-- 顶部 -->
    <topHeader title="今日运势"></topHeader>

    <div class="top_back">
      <div class="avatar">
        <img class="user_imgs" :src="avatar" alt="用户头像" />
        <img
          src="static/image/brandOperationOne/l_modify.png"
          alt="修改"
          class="modify_image"
          @click="modifyInfo"
        />
      </div>
      <div class="user_name">
        {{userName}}
        <span v-if="user_sex == 1" class="user_sex_b"></span>
        <span v-else class="user_sex_g"></span>
      </div>
    </div>
    <div class="minute">
      <div class="progress_bar">
        <x-circle
          v-if="fetch_data.zong.fenshu"
          :percent="fetch_data.zong.fenshu"
          :stroke-width="10"
          :trail-width="6"
          stroke-color="#FED95E"
        >
          <span>{{ fetch_data.zong.fenshu}}分</span>
        </x-circle>
      </div>
      <div class="content">
        <div :class="which_class(idx)" v-for="(i,idx) in data_list" :key="'list'+idx">
          <span>{{i.title}}</span>
          <span class="ok" v-for="(item,index) in level_on(i.fenshu)" :key="'cy_on'+index"></span>
          <span class="no" v-for="(item,index) in level_gray(i.fenshu)" :key="'cy_gray'+index"></span>
          <span>{{i.fenshu}}分</span>
        </div>
      </div>
    </div>
    <div class="canalage">
      <div class="box_content">
        <div class="title">开运色</div>
        <div>{{fetch_data.kaiyun.color}}</div>
      </div>
      <div class="box_content">
        <div class="title">幸运数</div>
        <div>{{fetch_data.kaiyun.number}}</div>
      </div>
      <div class="box_content">
        <div class="title">财位</div>
        <div>{{fetch_data.kaiyun.cai}}</div>
      </div>
      <div class="box_content">
        <div class="title">桃花位</div>
        <div>{{fetch_data.kaiyun.taohua}}</div>
      </div>
    </div>
    <div class="message">
      <div :class="which_class(idx)" v-for="(i,idx) in data_list" :key="'des'+idx">
        <span>{{i.title}}：</span>
        <p>{{i.duanyu}}{{i.jianyi}}</p>
      </div>
    </div>
    <div class="footer_button">
      <button class="jieh" @click="toMaster()">找大师解惑</button>
      <button class="yuns" @click="toLink(url2019ys)">查看2019年运势</button>
    </div>

    <!-- 广告 -->
    <theAdvertis :adProp='adProp'></theAdvertis>

  </div>
</template>

<script>
import topHeader from "@/components/topHeader";
import theAdvertis from '@/components/the-advertis';
import tool from "@/assets/js/tool";
import { XCircle } from "vux";
import { Script } from 'vm';
export default {
  name: "luckTwo",
  components: {
    XCircle,
    topHeader,
    theAdvertis
  },
  data() {
    return {
      fetch_data: {
        zong: {
          fenshu: ""
        },
        kaiyun: {
          color: ""
        }
      },
      userName: window.localStorage.getItem("JMYC_USERNAME"),
      user_sex: window.localStorage.getItem("JMYC_USERGENDER"),
      data_list: [],
      url2019ys: "https://cs.52dd.cn/lnyc2019/index.html?qd=52dd&posId=123",
      avatar: tool.getAvatar(window.localStorage.getItem("JMYC_USERGENDER")),
      adProp:{
        gid:7,
        type:1,
        position:4
      }
    };
  },
  created() {
    this.$store.commit("changePageLoading", true);
    this.fetch_page();
  },
  // 设置跳转问大师页面不缓存
  beforeRouteLeave (to, from, next) {
    if(to.name == 'h_askTeacher'){
      to.meta.keepAlive = false
      next()
    }else{
      next()
    }
  },
  methods: {
    which_class(index) {
      switch (index) {
        case 0:
          return "caiyun";
        case 1:
          return "ganqing";
        case 2:
          return "shiye";
      }
    },
    //星级
    level_on(score) {
       if (score < 21) {
        return 1;
      }
      if (score < 41) {
        return 2;
      }
      if (score < 61) {
        return 3;
      }
      if (score < 81) {
        return 4;
      }
      if (score < 101) {
        return 5;
      }
      // if (jixiong == "大凶") {
      //   return 1;
      // }
      // if (jixiong == "凶") {
      //   return 2;
      // }
      // if (jixiong == "平淡") {
      //   return 3;
      // }
      // if (jixiong == "小吉") {
      //   return 4;
      // }
      // if (jixiong == "大吉") {
      //   return 5;
      // }
    },
    level_gray(score) {
      return 5 - this.level_on(score);
    },
    pro_list(score) {
      if (this.fetch_data) {
        this.data_list = this.fetch_data.today;
        // console.log(this.data_list);
      }
    },
    fetch_page() {
      var self = this;
      var params = {
        // device: '869115037298615,869115037349111',
        name: window.localStorage.getItem("JMYC_USERNAME"),
        sex: window.localStorage.getItem("JMYC_USERGENDER") == 1 ? 1 : 0,
        birthday: window.localStorage.getItem("JMYC_BIRTHDATE"),
        nopoint: window.localStorage.getItem("JMYC_NOPOINT")
      };
      self.$fetch.post("/app/Jmmfcs/bzday", params).then(res => {
        if (res.code == 200) {
          self.fetch_data = res.data;
          // console.log(self.fetch_data);
          self.pro_list();
          self.$store.commit("changePageLoading", false);
        }
      }).catch(()=>{
        self.$vux.toast.text('服务器错误，请稍后重试！', 'top')
        setTimeout(()=>{
          self.$router.back()
        },2000)
      })
    },
    modifyInfo() {
      this.$router.replace("/luckOne");
    },
    toMaster() {
      this.$router.push({
        path: "/askTeacher",
        query: {
          isMiddlePage: 1
        }
      });
    },
    toLink(url) {
      tool.createNavigation(this, "jmyc", url);
    }
  }
};
</script>
<style lang="less">
    @import "../../assets/css/public.less";
    @import "../../assets/css/tml_base.less";
    @import "./index.less";
</style>


